<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.timepicker.min.css" />
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div id="searchBox">
          <form class="layui-form layui-form-pane" action="" id="dataForm">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">当前总分</label>
                <div class="layui-input-inline">
                  <input type="text" id="total" lay-verify="number" name="total" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">当前样本数</label>
                <div class="layui-input-inline">
                  <input type="text" lay-verify="number" name="sample_count" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">预估分数</label>
                <div class="layui-input-inline">
                  <input type="text" lay-verify="number" name="target_score" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">目标平均分</label>
                <div class="layui-input-inline">
                  <input type="text" lay-verify="number" name="target_average" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-reset-btn">重置</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div>
        <table class="layui-table">
          <thead>
            <tr>
              <th>当前总分</th>
              <th>当前样本数</th>
              <th>预估分数</th>
              <th>目标平均分</th>
              <th>计分结果</th>
            </tr>
          </thead>
          <tbody id="tablesBody"></tbody>
        </table>
      </div>
    </div>
    <style>
      #searchBox .layui-inline {
        margin: 0 0px 10px 0;
      }
      .layui-form-item {
        margin: 0 !important;
      }
      .spanItem {
        line-height: 20px;
        margin-right: 20px;
        display: inline-block;
      }
      .spanItem span {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
      }
      .layui-form-pane .layui-input-inline {
        width: 120px;
      }
    </style>
    <script id="tableList" type="text/html">
      <!--layui模板引擎，动态添加后台数据-->
      {{# layui.each(d, function(index, item){ }}
      <tr>
        <td>{{ item.total }}</td>
        <td>{{ item.sample_count }}</td>
        <td>{{ item.target_score }}</td>
        <td>{{ item.target_average }}</td>
        <td>{{ item.result }}</td>
      </tr>
      {{# }); }}
    </script>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/common.js" charset="utf-8"></script>
    <script src="../js/base.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/jquery.timepicker.min.js"></script>
    <script>
      //计分历史数组
      let historyArray = [];
      layui.use(["form", "laytpl", "myModule"], function () {
        //初始化开始
        var $ = layui.jquery,
          form = layui.form,
          laytpl = layui.laytpl,
          myModule = layui.myModule;
        /*****************************************按钮控制*******************************************/
        // 监听确定按钮
        form.on("submit(data-search-btn)", function (data) {
          var result = data.field;
          console.log("result", result);

          /**************************start****************************/
          let obj = {
            ...data.field,
            result: 10,
          };
          historyArray.unshift(obj);
          var getTpl = $("#tableList").get(0).innerHTML;
          var view = $("#tablesBody").get(0);
          var html = laytpl(getTpl).render(historyArray, function (html) {
            view.innerHTML = html;
          });
          $("#dataForm")[0].reset();
          layui.form.render();
          $("#total").focus();
          /***************************end***************************/

          /***************************start*******************************/
          // var indAjax = layer.load(0, {
          //   shade: [0.1, "#000"],
          // });
          ////ajax
          // myModule.ajax({
          //   url: `${ajaxUrlSet}/sendcollect`,
          //   type: "Post",
          //   dataType: "json",
          //   data: JSON.stringify(data.field),
          //   success: function (res) {
          //     layer.msg("请求成功", { icon: 1, time: 1100 });
          //     layer.close(indAjax);
          //     //插入表格数据显示
          //     let obj = {
          //       ...data.field,
          //       result: 10,
          //     };
          //     historyArray.unshift(obj);
          //     var getTpl = $("#tableList").get(0).innerHTML;
          //     var view = $("#tablesBody").get(0);
          //     var html = laytpl(getTpl).render(historyArray, function (html) {
          //       view.innerHTML = html;
          //     });
          //     $("#dataForm")[0].reset();
          //     layui.form.render();
          //     $("#total").focus();
          //   },
          //   error: function (r) {
          //     layer.msg("请求失败", { icon: 2, time: 1100 });
          //     layer.close(indAjax);
          //   },
          // });
          /***************************end*********************************/
          return false;
        });
        // 监听重置操作
        form.on("submit(data-reset-btn)", function (data) {
          $("#total").focus();
        });
      });
    </script>
  </body>
</html>
